<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	</head>
	<body>
		<div class="ball">
			<div class="ball-content">
				<div class="ball-image">
					<img class="ball-image-src" src="http://file.suisuifa.cn/202007161419489f4150222.JPG" />
					<div class="ball-image-number">22</div>
				</div>
			</div>
		</div>
	</body>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
		}

		body {
			background-color: rgba(255, 255, 255, 0);
		}

		.ball {
			height: 56px;
			width: 56px;
			background-color: #fff;
			padding: 2px;
			border-radius: 57px;
			box-sizing: border-box;
			border: 1px solid #dbdbdb;
			overflow: hidden;
		}

		.ball-content {
			width: 50px;
			height: 50px;
			border-radius: 50px;
			background-image: radial-gradient(#ffffff, #f1f1f1, #ededed);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.ball-image {
			width: 36px;
			height: 36px;
			border-radius: 36px;
			position: relative;

		}

		.ball-image-src {
			width: 36px;
			height: 36px;
			border-radius: 36px;
		}
		.ball-image-number{
			width: 16px;
			height:16px;
			background-color: #FF0000;
			position: absolute;
			right: -2px;
			top: -2px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 10px;
			color: #fff;
			border-radius: 14px;
		}
	</style>
</html>
